<template>
    <!-- 头部 -->
    <div class="header">
        <span>xx管理系统</span>
        <div class="avatar-img">
            <a-dropdown placement="bottomLeft" @click.prevent>
                <a-avatar shape="circle" :src="userStore.userInfo.avatar" />
                <template #overlay>
                    <a-menu @click="handleClick">
                        <a-menu-item key="/logout">
                            退出
                        </a-menu-item>
                        <a-menu-item key="/home/person">
                            用户信息
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import {useUserStore} from "@/store/UserInfo.js"
const userStore = useUserStore();

const router = useRouter();

const handleClick = ({key}) => {
    if(key === "/logout"){
        // 删除用户信息
        userStore.clearAll();
        router.replace("/login")
    }else{
        router.push(key)
    }
    
}

</script>

<style scoped>
.header {
    height: 60px;
    text-align: center;
    line-height: 60px;
    position: relative;
}

.header>span {
    font-size: 27px;
    font-weight: bold;
    color: #ffffff;
    font-family: '楷体'
}

.avatar-img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
</style>